<!--
 * @Author: HuangBingQuan <17671241237@163.com>
 * @Date: 2025-01-16 16:32:16
 * @LastEditTime: 2025-01-16 16:33:31
 * @FilePath: /low-code-platform/src/components/SurveyComs/EditItems/OptionsEditor.vue
-->
<template>
    <div :key="id">
        <div class="flex align-items-center mb-10">
            <div class="mr-10">选项</div>
            <el-button size="small" :icon="Plus" circle @click="addOptionHandle"></el-button>
        </div>
        <div v-for="(item, index) in status" :key="index" class="flex align-items-center">
            <el-input placeholder="选项" class="mt-5 mb-5" v-model="textArr[index]"></el-input>
            <el-button type="danger" class="ml-10" size="small" :icon="Minus" circle></el-button>
        </div>
    </div>
</template>

<script setup lang="ts">
    import type { VueComType } from "@/types";
    import { Plus, Minus } from "@element-plus/icons-vue";
    import { ref, inject } from "vue";
    const props = defineProps<{
        status: string[],
        isShow: boolean,
        configKey: string,
        editCom: VueComType,
        id: string
    }>();

    const textArr = ref(props.status)
    const updateStatus = inject('updateStatus');

    const addOptionHandle = ()=> {
        updateStatus(props.configKey);
    }
</script>

<style lang="scss" scoped></style>
